<template>
  <div>
    <div>
      <!-- 轮播图表格 -->
      <el-table 
        :data="tableData" 
        border 
        stripe 
        style="width: 80%; margin: 2px auto"
      >
        <el-table-column label="商品">
          <!-- Vue3 插槽语法，#default 等同于 v-slot:default -->
          <template #default="scope">
            <a :href="'/goodView/' + scope.row.goodId">
              {{ scope.row.goodName }}
            </a>
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template #default="scope">
            <img 
              :src="baseApi + scope.row.img" 
              width="300" 
              height="185"
            />
          </template>
        </el-table-column>
        <el-table-column 
          prop="showOrder" 
          label="轮播顺序"
        />

        <el-table-column 
          fixed="right" 
          label="操作" 
          width="250"
        >
          <template #default="scope">
            <el-button 
              type="primary" 
              icon="el-icon-a-032" 
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
            <el-popconfirm 
              @confirm="del(scope.row.id)" 
              title="确定删除？"
            >
              <!-- Vue3 中 popconfirm 的 reference 插槽用 #reference 语法 -->
              <template #reference>
                <el-button 
                  type="danger" 
                  icon="el-icon-a-022" 
                  style="margin-left: 10px"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增按钮 -->
    <div style="text-align: center">
      <el-button 
        @click="add" 
        type="primary" 
        style="margin: 30px; width: 150px; font-size: 20px"
      >
        <i class="el-icon-a-07"></i>
        新增
      </el-button>
    </div>

    <!-- 弹窗（.sync 改为手动监听事件，Vue3 中也可结合 v-model 语法糖，这里按你原有逻辑调整） -->
    <el-dialog 
      title="信息" 
      :visible="dialogFormVisible" 
      width="30%" 
      :close-on-click-modal="false" 
      @update:visible="(val) => dialogFormVisible = val"
    >
      <el-form :model="entity">
        <el-form-item 
          label="商品id" 
          label-width="150px"
        >
          <el-input 
            v-model="entity.goodId" 
            autocomplete="off" 
            style="width: 80%"
          />
        </el-form-item>
        <el-form-item 
          label="轮播顺序" 
          label-width="150px"
        >
          <el-select v-model="entity.showOrder">
            <el-option 
              v-for="index in tableData.length" 
              :key="index" 
              :label="index" 
              :value="index"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '../../../utils/request' 
const url = '/api/carousel/'

export default {
  // 组件名改为多单词（符合 vue/multi-word-component-names 规则）
  name: 'CarouselManage', 
  data() {
    return {
      baseApi: this.$store.state.baseApi,
      tableData: [],
      entity: {},
      dialogFormVisible: false
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      API.get(url).then(res => {
        this.tableData = res.data || []
      })
    },
    add() {
      this.entity = {}
      // 避免直接修改 length 导致的响应式问题，改用重新赋值
      this.tableData = [...this.tableData, {}] 
      this.dialogFormVisible = true
    },
    edit(row) {
      // 深拷贝确保不影响原数据
      this.entity = JSON.parse(JSON.stringify(row)) 
      this.dialogFormVisible = true
    },
    save() {
      if (!this.entity.goodId) {
        this.$message.error('商品id不能为空')
        return
      }
      if (this.entity.showOrder === undefined) {
        this.$message.error('轮播顺序不能为空')
        return
      }

      API.post(url, this.entity).then(res => {
        if (res.code === '200') {
          this.$message.success('保存成功')
          this.load()
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    del(id) {
      API.delete(url + id).then(res => {
        if (res.code === '200') {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.load()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
/* 样式可根据实际需求扩展，当前保持为空 */
</style>